import React, { useCallback, useEffect, useState, memo } from 'react'
import style from './style/CardRankComp.css'
import { Link, withRouter } from "react-router-dom";
import { toplistAllReq, topListByidReq } from '@/utils/api/recommend'
import { connect } from 'react-redux'

import {
  playSongAction,
  addSongAction
} from "@/redux/actions";

const RankItem = memo(({rankDetail, addSong, playSong, history}) => {
  const [rankDetailList, setrankDetailList] = useState([])
  useEffect(() => {
    const getData = async () => {
      const res = await topListByidReq({id: rankDetail.id})
      console.log(res.data);
      if (res.data.code === 200) {
        setrankDetailList(res.data.playlist.tracks.splice(0, 10))
      }
    }
    getData()
  }, [])

  return <div className={style.rankItem}>
    <div className={style.rankHeader}>
      <div style={{position: 'relative'}}>
        {/* <div className={style.msk}></div> */}
        <img src={rankDetail.coverImgUrl} alt="Xsc6HphpI6UeAf1601346344200929" className={style.leftImg}/>
      </div>
      <div className={style.rightContent}>
        <div className={style.itemTitle}>{rankDetail.name}</div>
        <div className={style.iconWrap}>
          <svg t="1606187758526" className={style.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2761" width="48" height="48"><path d="M512 58.88C258.56 58.88 53.76 262.4 53.76 514.56c0 250.88 204.8 455.68 458.24 455.68 253.44 0 458.24-203.52 458.24-455.68 0-252.16-204.8-455.68-458.24-455.68z m0 851.2c-218.88 0-395.52-176.64-395.52-395.52 0-217.6 176.64-395.52 395.52-395.52s395.52 176.64 395.52 395.52c0 218.88-176.64 395.52-395.52 395.52z m0 0" fill="#8a8a8a" p-id="2762"></path><path d="M674.56 495.36l-19.2-15.36-21.76-19.2-157.44-130.56-23.04-19.2-1.28-1.28c-12.8-10.24-32-8.96-43.52 1.28-7.68 6.4-12.8 15.36-10.24 24.32v360.96c-2.56 8.96 2.56 17.92 10.24 24.32 11.52 10.24 32 10.24 43.52 1.28l1.28-1.28 23.04-19.2 157.44-131.84 21.76-17.92 19.2-15.36c6.4-5.12 8.96-11.52 8.96-19.2 0-8.96-2.56-16.64-8.96-21.76z" fill="#8a8a8a" p-id="2763"></path></svg>
        </div>
        <div className={style.iconWrap}>
          <svg t="1606187800423" className={style.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3856" width="48" height="48"><path d="M362.666667 85.333333a32 32 0 0 1 22.293333 9.045334l2.133333 2.282666L503.893333 234.666667H874.666667a64 64 0 0 1 64 64v576a64 64 0 0 1-64 64H149.333333a64 64 0 0 1-64-64V117.333333a32 32 0 0 1 28.928-31.850666L117.333333 85.333333H362.666667z m512 213.333334H149.333333v576h725.333334V298.666667z m-362.666667 117.333333a32 32 0 0 1 32 32v96H640a32 32 0 0 1 3.072 63.850667L640 608h-96V704a32 32 0 0 1-64 0v-96H384a32 32 0 0 1-3.072-63.850667L384 544h96V448a32 32 0 0 1 32-32zM347.818667 149.333333H149.333333v85.333334h270.698667l-72.213333-85.333334z" fill="#8a8a8a" p-id="3857"></path></svg>
        </div>
      </div>
    </div>
    <div className={style.rankBody}>
      {rankDetailList.map((item, index) => {
        return <div className={style.ranklistItem} key={index}>
          <div className={[style.rankNum, index < 3 ? style.rankOne : style.rankOther].join(' ')}>{index + 1}</div>
          <div className={style.ranContent}>
            <Link className={style.rankTitle} to={`song/${item.id}/1`} >{item.name}</Link>
            <div className={style.btnGroup}>
              <svg onClick={() => playSong(item.id)} t="1606187758526" className={style.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2761" width="15" height="15"><path d="M512 58.88C258.56 58.88 53.76 262.4 53.76 514.56c0 250.88 204.8 455.68 458.24 455.68 253.44 0 458.24-203.52 458.24-455.68 0-252.16-204.8-455.68-458.24-455.68z m0 851.2c-218.88 0-395.52-176.64-395.52-395.52 0-217.6 176.64-395.52 395.52-395.52s395.52 176.64 395.52 395.52c0 218.88-176.64 395.52-395.52 395.52z m0 0" fill="#8a8a8a" p-id="2762"></path><path d="M674.56 495.36l-19.2-15.36-21.76-19.2-157.44-130.56-23.04-19.2-1.28-1.28c-12.8-10.24-32-8.96-43.52 1.28-7.68 6.4-12.8 15.36-10.24 24.32v360.96c-2.56 8.96 2.56 17.92 10.24 24.32 11.52 10.24 32 10.24 43.52 1.28l1.28-1.28 23.04-19.2 157.44-131.84 21.76-17.92 19.2-15.36c6.4-5.12 8.96-11.52 8.96-19.2 0-8.96-2.56-16.64-8.96-21.76z" fill="#8a8a8a" p-id="2763"></path></svg>
              <svg onClick={() => addSong(item.id)} t="1607090185197" className={style.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3654" width="13" height="13"><path d="M512 0c60.586667 0 109.738667 49.152 109.738667 109.738667l-0.085334 292.522666h292.693334a109.738667 109.738667 0 0 1 0 219.477334l-292.693334-0.085334v292.693334a109.738667 109.738667 0 0 1-219.306666 0l-0.085334-292.693334H109.738667a109.738667 109.738667 0 0 1 0-219.306666l292.522666-0.085334V109.738667C402.261333 49.152 451.413333 0 512 0z" p-id="3655" fill="#8a8a8a"></path></svg>
              <svg t="1606187800423" className={style.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3856" width="15" height="15"><path d="M362.666667 85.333333a32 32 0 0 1 22.293333 9.045334l2.133333 2.282666L503.893333 234.666667H874.666667a64 64 0 0 1 64 64v576a64 64 0 0 1-64 64H149.333333a64 64 0 0 1-64-64V117.333333a32 32 0 0 1 28.928-31.850666L117.333333 85.333333H362.666667z m512 213.333334H149.333333v576h725.333334V298.666667z m-362.666667 117.333333a32 32 0 0 1 32 32v96H640a32 32 0 0 1 3.072 63.850667L640 608h-96V704a32 32 0 0 1-64 0v-96H384a32 32 0 0 1-3.072-63.850667L384 544h96V448a32 32 0 0 1 32-32zM347.818667 149.333333H149.333333v85.333334h270.698667l-72.213333-85.333334z" fill="#8a8a8a" p-id="3857"></path></svg>
            </div>
          </div>
        
        </div>
      })}
    </div>
    <Link className={[style.ranklistItem, style.lookMore].join(' ')} to="#">
      查看全部 &gt;
    </Link>
  </div>
})

function CardRankComp({addSong, playSong, history}) {
  const [rankList, setRankList] = useState([])

  useEffect(async () => {
    await getData()
  }, [])

  
  const getData = useCallback(async (data = {}) => {
    const res = await toplistAllReq(data)
    if (res.data.code === 200) {
      setRankList(res.data.list.splice(0,3))
    }
  }, [])
  
  return (
    <div className={style.rankOverside}>
      {rankList.map(rankDetail => (
        <RankItem rankDetail={rankDetail} key={rankDetail.id} addSong={addSong} playSong={playSong} history={history} />
      ))}
    </div>
  )
}

const mState = () => {
  return {};
};
const mDispatch = (dispatch) => {
  return {
    playSong: (...arg) => {
      dispatch(playSongAction(...arg))
    },
    addSong: (...arg) => {
      dispatch(addSongAction(...arg))
    }
  };
};
export default withRouter(connect(mState, mDispatch)(CardRankComp));
